import React from "react";
import {Link} from "react-router";
import { connect } from 'react-redux'
import $ from "jquery";
import iScroll from "iscroll/build/iscroll-probe"; // 只有这个库支持onScroll,从而支持bounce阶段的事件捕捉

import Header from "../components/common/Header";
import Footer from '../components/common/Footer';

import '../../asset/css/product.css';

import { setExchangeModalData, setGlobalData } from '../actions/index';

const ProductList = class ProductList extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            items: [],
            pullDownStatus: 3,
            pullUpStatus: 0,
        };

        this.page = 1;
        this.itemsChanged = false;

        this.pullDownTips = {
            // 下拉状态
            0: '下拉发起刷新',
            1: '继续下拉刷新',
            2: '松手即可刷新',
            3: '正在刷新',
            4: '刷新成功',
        };

        this.pullUpTips = {
            // 上拉状态
            0: '上拉发起加载',
            1: '松手即可加载',
            2: '正在加载',
            3: '加载成功',
        };

        this.isTouching = false;

        this.onItemClicked = this.onItemClicked.bind(this);

        this.onScroll = this.onScroll.bind(this);
        this.onScrollEnd = this.onScrollEnd.bind(this);

        this.onTouchStart = this.onTouchStart.bind(this);
        this.onTouchEnd = this.onTouchEnd.bind(this);
    }


    /**
     * 点击跳转详情页
     */
    onItemClicked(ev) {
        // 获取对应的DOM节点, 转换成jquery对象
        let item = $(ev.target);
        // 操作router实现页面切换
        this.context.router.push(item.attr('to'));
        this.context.router.goForward();
    }

    onTouchStart(ev) {
        console.log("=========onTouchStart========");
        this.isTouching = true;
    }

    onTouchEnd(ev) {
        console.log("=========onTouchEnd========");
        this.isTouching = false;
    }

    onPullDown() {

        console.log("=========onPullDown========");
        // 手势
        if (this.isTouching) {
            if (this.iScrollInstance.y > 5) {
                this.state.pullDownStatus != 2 && this.setState({pullDownStatus: 2});
            } else {
                this.state.pullDownStatus != 1 && this.setState({pullDownStatus: 1});
            }
        }
    }

    onPullUp() {
        console.log("=========onPullUp========");
        // 手势
        if (this.isTouching) {
            if (this.iScrollInstance.y <= this.iScrollInstance.maxScrollY - 5) {
                this.state.pullUpStatus != 1 && this.setState({pullUpStatus: 1});
            } else {
                this.state.pullUpStatus != 0 && this.setState({pullUpStatus: 0});
            }
        }
    }

    onScroll() {

        console.log("=========onScroll========");
        let pullDown = $(this.refs.PullDown);

        // 上拉区域
        if (this.iScrollInstance.y > -1 * pullDown.height()) {
            this.onPullDown();
        } else {
            this.state.pullDownStatus != 0 && this.setState({pullDownStatus: 0});
        }

        // 下拉区域
        if (this.iScrollInstance.y <= this.iScrollInstance.maxScrollY + 5) {
            this.onPullUp();
        }
    }

    onScrollEnd() {
        console.log("=========onScrollEnd========");
        console.log("onScrollEnd" + this.state.pullDownStatus);

        let pullDown = $(this.refs.PullDown);

        // 滑动结束后，停在刷新区域
        if (this.iScrollInstance.y > -1 * pullDown.height()) {
            if (this.state.pullDownStatus <= 1) {   // 没有发起刷新,那么弹回去
                this.iScrollInstance.scrollTo(0, -1 * $(this.refs.PullDown).height(), 200);
            } else if (this.state.pullDownStatus == 2) { // 发起了刷新,那么更新状态
                this.setState({pullDownStatus: 3});
                this.fetchItems(true);
            }
        }

        // 滑动结束后，停在加载区域
        if (this.iScrollInstance.y <= this.iScrollInstance.maxScrollY) {
            if (this.state.pullUpStatus == 1) { // 发起了加载，那么更新状态
                this.setState({pullUpStatus: 2});
                this.fetchItems(false);
            }
        }
    }




    componentDidMount() {
        const options = {
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: true,
        };
        this.iScrollInstance = new iScroll(`#${'listeItem'}`,options);
        this.iScrollInstance.on('scroll', this.onScroll);
        this.iScrollInstance.on('scrollEnd', this.onScrollEnd);

        this.fetchItems(true);
    }

    shouldComponentUpdate(nextProps, nextState) {
        // 列表发生了变化, 那么应该在componentDidUpdate时调用iscroll进行refresh
        this.itemsChanged = nextState.items !== this.state.items;
        return true;
    }

    componentDidUpdate() {
        // 仅当列表发生了变更，才调用iscroll的refresh重新计算滚动条信息
        if (this.itemsChanged) {
            this.iScrollInstance.refresh();
        }
        return true;
    }

    onScroll() {
        let pullDown = $(this.refs.PullDown);

        // 上拉区域
        if (this.iScrollInstance.y > -1 * pullDown.height()) {
            this.onPullDown();
        } else {
            this.state.pullDownStatus != 0 && this.setState({pullDownStatus: 0});
        }

        // 下拉区域
        if (this.iScrollInstance.y <= this.iScrollInstance.maxScrollY + 5) {
            this.onPullUp();
        }
    }

    onScrollEnd() {
        console.log("onScrollEnd" + this.state.pullDownStatus);

        let pullDown = $(this.refs.PullDown);

        // 滑动结束后，停在刷新区域
        if (this.iScrollInstance.y > -1 * pullDown.height()) {
            if (this.state.pullDownStatus <= 1) {   // 没有发起刷新,那么弹回去
                this.iScrollInstance.scrollTo(0, -1 * $(this.refs.PullDown).height(), 200);
            } else if (this.state.pullDownStatus == 2) { // 发起了刷新,那么更新状态
                this.setState({pullDownStatus: 3});
                this.fetchItems(true);
            }
        }

        // 滑动结束后，停在加载区域
        if (this.iScrollInstance.y <= this.iScrollInstance.maxScrollY) {
            if (this.state.pullUpStatus == 1) { // 发起了加载，那么更新状态
                this.setState({pullUpStatus: 2});
                this.fetchItems(false);
            }
        }
    }




    fetchItems(isRefresh) {

        const categoryId = this.props.params.categoryId;

        if (isRefresh) {
            this.page = 1;
        }


        $.ajax({
            url: '../webapp/data/productList.json',
           // data: {categoryId:categoryId},
            type: 'GET',
            dataType: 'json',
            success: (response) => {
                if (isRefresh) {    // 刷新操作
                    if (this.state.pullDownStatus == 3) {
                        this.setState({
                            pullDownStatus: 4,
                            items: response
                        });
                        this.iScrollInstance.scrollTo(0, -1 * $(this.refs.PullDown).height(), 500);
                    }
                } else {    // 加载操作
                    if (this.state.pullUpStatus == 2) {
                        this.setState({
                            pullUpStatus: 0,
                            items: this.state.items.concat(response)
                        });
                    }
                }
                ++this.page;
                console.log(`fetchItems=effected isRefresh=${isRefresh}`);
            }
        });
    }



    render() {

        let PullDown = {
            'margin':'0px',
            'height': '40px',
            'width': '100%',
            'text-align': 'center',
            'font-size': '15px',
            'background-color': 'white',
            'line-height': '40px'
        }

        let PullUp = {
            'margin':'0px',
            'height': '40px',
            'width': '100%',
            'text-align': 'center',
            'font-size': '15px',
            'background-color': 'white',
            'line-height': '40px'
        }

        let lis = [];
        this.state.items.forEach((item, index) => {
            lis.push(

                <li key={index} to={`/msg-detail-page/${index}`} onClick={this.onItemClicked}>
                    <a className="version-item" href="#">
                        <div className="version-item-img">
                            <img className="lazy"  src={item.imgUrl} style={{'transform-origin': '0px 0px 0px', opacity: 1, transform: 'scale(1, 1)'}}/>
                        </div>
                        <div className="version-item-intro">
                            <div className="version-item-name">
                                <p>{item.title}</p>
                            </div>
                            <div className="version-item-brief">
                                <p>{item.desc}</p>
                            </div>
                            <div className="version-item-intro-price">
                                <span>{item.price}</span>
                            </div>
                        </div>
                    </a>
                </li>

            );
        })
        // 外层容器要固定高度，才能使用滚动条
        return (
            <div className="page-list">
                <Header title="商品列表"/>
                <ol className="version" id="listeItem" onTouchStart={this.onTouchStart} onTouchEnd={this.onTouchEnd}>
                    <p ref="PullDown" style={PullDown}>{this.pullDownTips[this.state.pullDownStatus]}</p>
                    {lis}
                    <p ref="PullUp" style={PullUp}>{this.pullUpTips[this.state.pullUpStatus]}</p>
                </ol>
                <Footer/>
            </div>

        );
    }
}

ProductList.contextTypes = {
    router: () => { React.PropTypes.object.isRequired }
};

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(ProductList);

